<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-ua-compatible" content="IE=edge" >
	<!-- 宽度===当前屏幕的宽度，缩放比例为当前不缩放 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>快速实现餐饮网页</title>
	<link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">

<style type="text/css">
        /*设置body元素字体为Microsoft YaHei*/
        body { font-family: Microsoft YaHei}
        .head-top{
            background: #5fa022;
            padding: 0.8em 0;
        }
        .navbar-brand{
            padding: 0 0;
        }
        /*设置图片logo的大小和位置*/
        .navbar-brand>img{
            height: auto;
            margin-right: 5px;
            margin-top: 5px;
            width: 250px;
        }
        /*设置整个导航菜单的内边距、背景色和阴影*/
        .navbar-default{
            padding: 1.5em 0;
            background-color: #f2f0f1;
            box-shadow: 12px -5px 39px -12px;
        }
        /*设置导航栏中菜单a链接的样式*/
        .navbar-default .navbar-nav>li a {
            top: 10px;
            padding: 0.5em 3em;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.2em;
            color:#919191;
        }
        /*设置导航栏菜单的鼠标悬停和获取焦点时的状态*/
        .navbar-default .navbar-nav> li >a:hover,
        .navbar-default .navbar-nav> li >a:focus {
            background:#D96B66;
            color: white;
            border-radius: 3px;
            -webkit-border-radius: 3px;
        }
        /*设置导航栏右侧a链接（0.00）的颜色*/
        .navbar-right>a{
            color:#D96B66;
        }

        /*媒体查询：当视口小于970px时，导航菜单字体变小，避免了换行的问题*/
        @media (max-width: 970px) {
            .navbar-default .navbar-nav>li a {
                font-size: 1.1em;
            }
        }
        /*header部分结束*/
    </style>

</head>
<body>

 <div class="head-top"></div>
    <nav class="navbar navbar-default" >
        <div class="container-fluid">
            <div class="container">
                <div class="navbar-header">
                    <!--<div class="logo">-->
                    <a href=" " class="navbar-brand" ><img src="images/logo.png"  alt=""></a>
                    <!--</div>-->
                    <!-- 当进入最小设备时，导航条将隐藏，显示“汉堡按钮”，点击时可以切面显示导航条隐藏的信息
                          * data-target ：用于确定需要显示div
                      --> 
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
                        <span class="sr-only">汉堡按钮</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <!-- 导航链接、表单和其他内容切换 -->
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#" >主页</a></li>
                        <li><a href="#">餐厅</a></li>
                        <li><a href="#">健康</a></li>
                        <li><a href="#">话题</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>

                    <div class="navbar-right ">
                        <a href="#">
                            <h3> <span >￥0.00 
                            	<img src="images/bao.png" alt=""/></span>
                        	</h3>
                        </a>
                    </div>
                </div>


            </div>
         </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>





<!-- 引入文件 -->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
</body>
</html>